import { observer } from 'mobx-react'
import {FC}  from 'react'
import { ObservableTodoListStore } from './store'
import ToDoView from './TodoView'

type PropsType = {
  store: ObservableTodoListStore
}

const TodoList: FC<PropsType> = observer((props: PropsType) => {
  const {store} = props;

  function handleAddTodo() {
    const taskName = prompt('Enter task name');
    if(taskName) {
      store.addTodo(taskName);
    }
  }

  function handleDelete(id: string) {
    store.deleteTodo(id);
  }
  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      <p>{JSON.stringify(store.todos)}</p>
      <ul>
      {store.todos.map(todo => {
        return <ToDoView key={todo.id} todo={todo} del={() => handleDelete(todo.id)} />
      })}
      </ul>
      <p>完成的数量：{store.completedTasks}</p>
    </div>
  )
});

export default TodoList;